<template>
    <div style="width: auto;height: 261px" id="leftTop">
    </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
    name: 'LeftTop',
    data () {
        return {
            // option配置
            option: {
                title: {
                    text: '用户图书收藏占比',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                },

                series: [
                    {
                        name: '收藏占比',
                        type: 'pie',
                        radius: ['80%', '20%'],
                        center: ['55%', '60%'],
                        data: [
                            { value: 1048, name: '完美世界' },
                            { value: 735, name: '太域' },
                            { value: 580, name: '一剑独尊' },
                            { value: 484, name: '万族之劫' },
                            { value: 301, name: '伏天氏' }
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            },
        }
    },
    mounted () {
        this.echartsInit()
    },
    methods: {
        echartsInit () {
            // 在生命周期中挂载
            echarts.init(document.getElementById('leftTop')).setOption(this.option)
        }
    }
}
</script>

<style scoped>

</style>
